<template>
    <div class="flex h-full bg-[#f8f8f8]">
        <div
            class="w-[180px] mr-[20px] px-[10px] py-[10px] bg-white h-full overflow-x-hidden overflow-y-auto shrink-0"
        >
            <ul class="infinite-list" style="overflow: auto">
                <li
                    v-for="item in patientList"
                    :key="item.ID"
                    class="infinite-list-item py-[10px] px-[10px] mb-[10px] rounded-md cursor-pointer"
                    :class="
                        item.active
                            ? 'bg-primarylight text-white'
                            : 'bg-blue-50'
                    "
                    @click="doChangeUser(item)"
                >
                    <div class="mb-[5px]">
                        <span>{{ item.PatientName }}</span
                        ><span class="ml-[10px]">{{ item.PatientCode }}</span>
                    </div>
                    <div class="flex">
                        <div>{{ item.PatientGenderExp }}</div>
                        <div class="ml-[10px]">
                            {{ item.PatientBirthDayExp }}
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="tijiandetail bg-white w-[660px] mr-[20px] shrink-0">
            <MetaTable
                ref="table1Ref"
                :formData="formData"
                :tableColumn="tableColumn"
                :tableData="table.tableData"
                :isFetchedTable="table.isFetched"
                :highlightCurrentRow="false"
                :showBorder="false"
                cellClassName="cell-class-name"
            >
            </MetaTable>
        </div>

        <!-- 体检助手 -->
        <MedicalExaminationAssistant
            class="h-full f-1 min-w-[460px] bg-white"
            @openFanKui="doOpenFanKui"
            @openEdit="doOpenEdit"
            @openReset="doOpenReset"
        />
    </div>
    <!-- 问题反馈 -->
    <ProblemFeedback ref="problemFeedbackRef" />

    <!-- 编辑、新增体检结果 -->
    <EditMedicalExaminationResults ref="editMedicalExaminationResultsRef" />

    <!-- 重置规则提醒 -->
    <ResetDialog ref="resetDialogRef" />
</template>

<script setup>
import { unref, ref, onMounted, computed, reactive, provide } from 'vue'
import EditMedicalExaminationResults from './components/editMedicalExaminationResults.vue'
import MedicalExaminationAssistant from './components/medicalExaminationAssistant.vue'
import ProblemFeedback from './components/problemFeedback.vue'
import ResetDialog from './components/resetDialog.vue'
import {
    getPatientDetailApi,
    getPatientListApi,
    QueryCheckupKnowledgeDetailAsyncApi
} from '@/api/home'
import { useLoadingStore } from '@/stores/loading'

const problemFeedbackRef = ref()
const editMedicalExaminationResultsRef = ref()
const resetDialogRef = ref()
const loadingStore = useLoadingStore()

// 进度条
const progress = reactive({
    isUse: false,
    isShow: false,
    value: 0
})

const currentPatient = ref({}) // 当前患者
const patientList = ref([]) // 患者列表

const zhinengtijianData = ref({})
const table = reactive({
    tableData: [],
    isFetched: false
}) //患者体检详情

const formData = ref({
    pageIndex: 1,
    pageSize: 1000
})

const tableColumn = computed(() => {
    return [
        {
            prop: 'ItemCode',
            label: '项目编码',
            align: 'center',
            width: 100
        },
        {
            prop: 'ItemName',
            label: '项目名称',
            align: 'center',
            width: 100
        },
        {
            prop: 'IndexCode',
            label: '指标编码',
            align: 'center',
            width: 100
        },
        {
            prop: 'IndexName',
            label: '指标名称',
            align: 'center',
            width: 100
        },
        {
            prop: 'ItemValue',
            label: '检查值',
            align: 'center',
            width: 100
        },
        {
            prop: 'ItemReference',
            label: '检查参考值范围',
            align: 'center',
            width: 160
        }
    ]
})

// 打开反馈
const doOpenFanKui = (data) => {
    unref(problemFeedbackRef).open(data)
}

// 打开编辑弹窗
const doOpenEdit = (data = {}) => {
    unref(editMedicalExaminationResultsRef).open(data)
}

// 打开重置弹窗
const doOpenReset = () => {
    unref(resetDialogRef).open()
}

// 切换患者
const doChangeUser = (item) => {
    if (item.PatientIdentityID === currentPatient.PatientIdentityID) {
        return
    }
    currentPatient.value = item
    patientList.value?.forEach((i) => {
        i.active = false
    })
    item.active = true
    progress.isUse = false
    // 获取患者体检信息
    getPatientDetail()

    // 获取患者智检信息
    getZhiJjianDetail(true)
}

// 获取患者列表
const getPatientList = () => {
    loadingStore.showFullLoading = true
    getPatientListApi({})
        .then((res) => {
            loadingStore.showFullLoading = true
            if (res?.Code == '200') {
                patientList.value = res.Data || []
                if (patientList.value?.length) {
                    // 默认选择第一个患者
                    doChangeUser(patientList.value[0])
                }
            } else {
                ElMessage.error(res?.Message || '获取患者列表失败')
            }
        })
        .catch((e) => {
            loadingStore.showFullLoading = false
            console.log(e)
        })
}

// 获取患者体检详情
const getPatientDetail = () => {
    loadingStore.showFullLoading = true
    getPatientDetailApi({
        healthCheckupID: currentPatient.value.ID
    })
        .then((res) => {
            loadingStore.showFullLoading = false
            table.isFetched = true
            if (res?.Code == '200') {
                table.tableData = res.Data.CheckupItems || []
            } else {
                ElMessage.error(res?.Message || '获取患者体检详情失败')
            }
        })
        .catch((e) => {
            table.isFetched = true
            loadingStore.showFullLoading = false
            console.log(e)
        })
}

// 获取智检列表信息
const getZhiJjianDetail = (flag) => {
    if (flag) {
        progress.value = 10
    } else {
        progress.value == 100
        loadingStore.showFullLoading = true
    }

    QueryCheckupKnowledgeDetailAsyncApi({
        healthCheckupID: currentPatient.value.ID
    })
        .then((res) => {
            loadingStore.showFullLoading = false
            if (res?.Code == '200') {
                if (flag) {
                    let timer = setInterval(() => {
                        progress.value += 1
                        if (progress.value == 100) {
                            clearInterval(timer)
                            timer = null
                        }
                    }, 30)
                } else {
                    progress.value = 100
                }
                zhinengtijianData.value = res.Data || {}
            } else {
                progress.value = 100
                zhinengtijianData.value = {}
                ElMessage.error(res?.Message || '获取患者体检详情失败')
            }
        })
        .catch((e) => {
            progress.value = 100
            zhinengtijianData.value = {}
            loadingStore.showFullLoading = false
            console.log(e)
        })
}

onMounted(() => {
    getPatientList()
})

// 智能体检数据详情
provide('zhinengtijianData', zhinengtijianData)

// 获取智检列表
provide('getZhiJjianDetail', getZhiJjianDetail)

provide('progress', progress)
</script>

<style scoped lang="scss">
.tijiandetail {
    :deep(.header-bg-class) {
        font-size: 12px;
    }
    :deep(.cell-class-name) {
        font-size: 12px;
    }
}
</style>
